<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="author" content="Yb">
  <title>小米商城-首页</title>
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/index-index.css">
  <link rel="stylesheet" href="css/navbarBtt.css">

</head>

<body>
  <!--搜索栏-->
  <nav class="nav_header navbar-fixed-top clearfix">
    <header>
      <img src="images/mi_logo.png" alt="logo">
      <!--表单-搜索-->
      <a href="index_search.html">
        <div class="nav_search">搜索商品名称</div>
        <!--<span class="glyphicon glyphicon-search"></span>
        <input type="text" placeholder="搜索商品名称">-->
      </a>
      <a href="user/login/login.html">&nbsp;登录</a>
    </header>
  </nav>

  <!--横幅-->
  <header class="mybanner">
    <a href="">
      <img src="images/banner-01.jpg" alt="">
      <img src="images/banner-02.jpg" alt="">
    </a>
  </header>

  <!--内容-->
  <section>

    <!--米家专场-->
    <div class="headerheader">
      <div>
        <a href="">
          <img src="images/headerheader01.jpg" alt="">
        </a>
      </div>
      <div>
        <a href="">
          <img src="images/headerheader02.jpg" alt="">
        </a>
        <a href="">
          <img src="images/headerheader03.jpg" alt="">
        </a>
      </div>
    </div>

    <!--明星单品-->
    <header class="mybanner">
      <a href="">
        <img src="images/header-pic01.jpg" alt="">
      </a>
    </header>
    <div class="main">
      <div>
        <a href="">
          <img src="images/hpic_01_01.jpg" alt="">
          <div>
            <h3>红米Note 4 32GB版</h3>
            <p>全金属十核千元旗舰</p>
            <span><sup>￥ </sup>999</span>
          </div>
        </a>
      </div>
      <div>
        <a href="">
          <img src="images/hpic_01_01.jpg" alt="">
          <div>
            <h3>红米Note 4 32GB版</h3>
            <p>全金属十核千元旗舰</p>
            <span><sup>￥ </sup>999</span>
          </div>
        </a>
      </div>
    </div>
    <div class="main">
      <div>
        <a href="">
          <img src="images/hpic_01_02.jpg" alt="">
          <div>
            <h3>小米手环2</h3>
            <p>OLED 显示屏，触摸操作</p>
            <span><sup>￥ </sup>149</span>
          </div>
        </a>
      </div>
      <div>
        <a href="">
          <img src="images/hpic_01_03.jpg" alt="">
          <div>
            <h3>小米路由器3</h3>
            <p>全向高增益4天线</p>
            <span><sup>￥ </sup>149</span>
          </div>
        </a>
      </div>
    </div>
    <div class="main">
      <div>
        <a href="">
          <img src="images/hpic_01_04.jpg" alt="">
          <div>
            <h3>小米5 64GB</h3>
            <p>十余项黑科技，很轻很快</p>
            <span><sup>￥ </sup>1799</span>
          </div>
        </a>
      </div>
      <div>
        <a href="">
          <img src="images/hpic_01_05.jpg" alt="">
          <div>
            <h3>小米5 32GB</h3>
            <p>十余项黑科技，很轻很快</p>
            <span><sup>￥ </sup>1599</span>
          </div>
        </a>
      </div>
    </div>

    <!--新品上线-->
    <header class="mybanner">
      <a href="">
        <img src="images/header-pic02.jpg" alt="">
      </a>
    </header>
    <div class="main">
      <div>
        <a href="">
          <img src="images/hpic_02_01.jpg" alt="">
          <div>
            <h3>最生活浴巾 青春系列</h3>
            <p>抗菌科技，为颜值保驾护航</p>
            <span><sup>￥ </sup>99</span>
          </div>
        </a>
      </div>
      <div>
        <a href="">
          <img src="images/hpic_02_02.jpg" alt="">
          <div>
            <h3>小米移动电源2</h3>
            <p>双向快充，仅 14.1mm 薄</p>
            <span><sup>￥ </sup>79</span>
          </div>
        </a>
      </div>
    </div>
    <div class="main">
      <div>
        <a href="">
          <img src="images/hpic_02_03.jpg" alt="">
          <div>
            <h3>小米移动电源5000mAh</h3>
            <p>可以放入衬衫兜的移动电源</p>
            <span><sup>￥ </sup>49<sub> 起</sub></span>
          </div>
        </a>
      </div>
      <div>
        <a href="">
          <img src="images/hpic_02_04.jpg" alt="">
          <div>
            <h3>小米盒子3c</h3>
            <p>4K 人工智能机顶盒</p>
            <span><sup>￥ </sup>199</span>
          </div>
        </a>
      </div>
    </div>
    <div class="main">
      <div>
        <a href="">
          <img src="images/hpic_02_05.jpg" alt="">
          <div>
            <h3>小米便捷鼠标</h3>
            <p>轻薄便捷，含电池仅重77.5g</p>
            <span><sup>￥ </sup>99</span>
          </div>
        </a>
      </div>
      <div>
        <a href="">
          <img src="images/hpic_02_06.jpg" alt="">
          <div>
            <h3>小米羊毛围巾</h3>
            <p>细腻针织工艺，保暖效果佳</p>
            <span><sup>￥ </sup>99</span>
          </div>
        </a>
      </div>
    </div>
  </section>






  <footer class="marginBtt"></footer>
  <nav class="navbarBtt">
    <a href="#">
      <div class="midh indexChecked"></div>
      <div>首页</div>
    </a>
    <a href="category/index.html">
      <div class="midh category"></div>
      <div>分类</div>
    </a>
    <a href="cart/index.html">
      <div class="midh cart"></div>
      <div>购物车</div>
    </a>
    <a href="user/index.html">
      <div class="midh user"></div>
      <div>我的</div>
    </a>
  </nav>






  <script src="bootstrap/js/jquery-3.1.1.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
  <!--<script>
    $('.carousel').carousel({
      interval: 3000
    })
  </script>-->

</body>

</html>